<template>
	<view>
		<view class="r_top">
			<view class="r_top_l flex">
				<view class="ttimg flex_jc_cent">
					<image src="/static/q.png" mode=""></image>
				</view>
				最近参加
			</view>
		</view>
		<view class="content">
			<scroll-view style="height: calc(100vh- 80rpx)" class="left" scroll-y="true">
				<view class="left_item flex_jc_cent" :class="data.queryParams.type ? '' : 'select'" @click="changeSelect({ name: '全部' })">全部</view>
				<view
					class="left_item flex_jc_cent"
					:class="data.queryParams.type == item.name ? 'select' : ''"
					v-for="(item, index) in data.selectList"
					:key="index"
					@click="changeSelect(item)"
				>
					{{ item.name }}
				</view>
			</scroll-view>
			<view class="right">
				<scroll-view style="height: calc(100vh- 80rpx)" class="" scroll-y="true">
					<loadstatusVue :status="data.loadStatus">
						<view class="right_item" v-for="(item, index) in data.list" :key="index" @click="goBack(item)">
							<view class="right_item_block">
								<view class="">
									<image :src="item.imgFace" mode="aspectFill" :lazy-load="true"></image>
								</view>
								<view class="right_cont">
									<view class="title">{{ item.name }}</view>
									<view class="">
										<view class="tips flex">
											<image src="/static/a1.png" mode=""></image>
											<view class="">{{ $formatDateTime(item.beginTime) }}</view>
										</view>
										<view style="margin-top: 6rpx" class="tips flex" v-if="item.lineType == 1">
											<image src="/static/a3.png" mode=""></image>
											<view class="">{{ item.platform }}</view>
										</view>
										<view style="margin-top: 6rpx" class="tips flex" v-else>
											<image src="/static/a2.png" mode=""></image>
											<view class="ts">{{ item.addressInfo }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 	<view class="kong" >
							<image src="/static/k1.png" mode=""></image>
							<view class="text">您还未参加任何活动，快去报名吧！</view>
						</view> -->
					</loadstatusVue>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getCurrentInstance, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getActivityAll } from '@/api/activity.js';
import { communityActivityList } from '@/api/community.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm, tansParams } from '@/utils/common';
const data = reactive({
	selectList: [],
	rangelist: [
		{ value: '', text: '全部' },
		{ value: 1, text: '线上' },
		{ value: 2, text: '线下' }
	],
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		type: '', // 活动类型
		pageNum: 1,
		pageSize: 10
	}
});

onLoad(() => {
	getType();
});
const goBack = (item) => {
	uni.$emit('communityID',item.id)
	uni.navigateBack()
};
const changeSelect = (item) => {
	data.queryParams.type = item.name; // 重置页码
	if (item.name == '全部') {
		data.queryParams.type = undefined; // 重置页码
	}
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
// 类型列表
const getType = () => {
	getActivityAll({}).then((res) => {
		if (res.code == 200) {
			data.queryParams.type = undefined;
			data.selectList = res.data;
			getList();
		}
	});
};
const scrolltolower = () => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await communityActivityList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
</script>

<style lang="scss">
page {
	background: #fbfcf9;
	height: 100vh;
	overflow: hidden;
}
.kong {
	width: 368rpx;
	margin: 260rpx auto;
	image {
		width: 368rpx;
		height: 212rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		margin-top: 30rpx;
		text-align: center;
	}
}
.r_top {
	width: 750rpx;
	height: 80rpx;
	background: #f7f7f7;
	padding: 18rpx 20rpx;
	box-sizing: border-box;
	.r_top_l {
		.ttimg {
			width: 44rpx;
			height: 44rpx;
			background: #d8c6a7;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin-right: 14rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
	}
}
.content {
	height: calc(100vh - 80rpx);
	display: flex;
	width: 750rpx;
	.left {
		width: 160rpx;
		height: 100%;
		background: #f5f5f0;
		box-sizing: border-box;
		.left_item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			text-align: center;
			height: 100rpx;
			border-left: 2rpx solid #f5f5f0;
		}
		.select {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #75613e;
			border-left: 2rpx solid #75613e;
			background: linear-gradient(270deg, #f5f5f0 0%, #eee8d8 100%);
		}
	}

	.right {
		width: 590rpx;
		height: 100%;
		background: #f7f8f6;
		.right_item {
			width: 550rpx;
			background: #ffffff;
			margin: 0rpx auto 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.right_item_block {
				display: flex;
				flex: 1;
				image {
					display: block;
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
				}
				.right_cont {
					flex: 1;
					margin-left: 12rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					justify-content: space-between;
					width: 0;
					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.tips {
						margin-top: 4rpx;
						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
							border-radius: 12rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #8f8f8b;
						.ts {
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
}
</style>
